import React, { PureComponent } from 'react'
import * as constants from '../store/constants'
import { connect } from 'react-redux'

export class About extends PureComponent {
  calcNumber(number,flag){
    console.log(number, flag)
    if(flag){
      this.props.add(number)
    }else {
      this.props.sub(number)
    }
  }
  render() {
    const { counter } = this.props
    return (
      <div>
        <span>About组件: {counter}</span>
        <div>
          <button onClick={() => this.calcNumber(8,true)}>+8</button>
          <button onClick={() => this.calcNumber(7,false)}>-7</button>
          <button onClick={() => this.calcNumber(18,true)}>+18</button>
        </div>
      </div>
    )
  }
}

// connect 返回值是一个高阶组件需要接收一个组件作为参数
// mapStateToProps 是一个函数，这个函数的参数是store中的state，返回值是一个对象，这个对象中的属性会作为props传递给About组件
const mapStateToProps = (state) => ({
  counter: state.counter
})
// mapDispatchToProps 是一个函数，这个函数的参数是dispatch，返回值是一个对象，这个对象中的属性会作为props传递给About组件
const mapDispatchToProps = (dispatch) => ({
  add: (num) => dispatch({ type: constants.ADD_NUMBER, num }),
  sub: (num) => dispatch({ type: constants.SUB_NUMBER, num })
})
export default connect(mapStateToProps,mapDispatchToProps)(About)